<template>
	<el-dialog v-model="dialogFormVisible" title='申请出库' width="600px" align-center draggable>
			<div class="product-name">您申请出库的产品是:&nbsp;&nbsp;{{formData.product_name}}</div>
			<div class="product-name">该产品的库存还有:&nbsp;&nbsp;{{formData.product_in_warehouse_number}}</div>
			<div class="dialog-content">
				<el-form ref="ruleFormRef" :model="formData" :label-position="labelPosition" :rules="rules"
					label-width="120px">
					<el-form-item label="申请出库编号" prop="product_out_id">
						<el-input v-model="formData.product_out_id" />
					</el-form-item>
					<el-form-item label="出库数量" prop="product_out_number">
						<el-input v-model="formData.product_out_number" />
					</el-form-item>
					<el-form-item label="出库申请人" prop="product_out_apply_person">
						<el-input v-model="formData.product_out_apply_person" />
					</el-form-item>
					<el-form-item label="产品单价" prop="product_single_price">
						<el-input v-model="formData.product_single_price" disabled/>
					</el-form-item>
					<el-form-item label="申请出库备注" prop="apply_memo">
						<el-input v-model="formData.apply_memo" :rows="2" type="textarea" />
					</el-form-item>
				</el-form>
			</div>
		<template #footer>
			<span class="dialog-footer">
				<el-button type="primary" @click="applyProduct" :disabled='formData.product_in_warehouse_number<formData.product_out_number'>
					确定
				</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import {ref,reactive} from 'vue'
import {applyOutProduct} from '@/api/product/index'
import type {applyOutProductForm} from '@/api/product/type'
import { ElMessage } from "element-plus"
const dialogFormVisible = ref<boolean>(false)
const labelPosition= ref('left')
const formData:applyOutProductForm = reactive({
    id:'',
    product_name:'',
    product_in_warehouse_number:'',
    product_out_id:'',
    product_out_number:'',
    product_out_apply_person:'',
    product_single_price:'',
    apply_memo:'',
})
	const rules = reactive({
		product_out_id: [
			{ required: true, message: '请输入申请出库编号', trigger: 'blur' },
		],
		product_out_number: [
			{ required: true, message: '请输入申请出库数量', trigger: 'blur' },
		],
		product_out_apply_person: [
			{ required: true, message: '请输入申请人', trigger: 'blur' },
		],
	})
//确定
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const applyProduct = async()=>{
    const res =  await applyOutProduct(formData)
    if(res.status == 0){
         ElMessage({
            type:'success',
            message:'申请成功'
        })
        dialogFormVisible.value = false
        emit('success')
    }else{
          ElMessage({
            type:'error',
            message:'申请失败'
        })
    }
}
const open = (row:any)=>{
    Object.assign(formData,{
        id:row.id,
        product_name:row.product_name,
        product_in_warehouse_number:row.product_in_warehouse_number,
        product_out_id:'',
        product_out_number:'',
        product_out_apply_person:'',
        product_single_price:row.product_single_price,
        apply_memo:'',
    })
    dialogFormVisible.value = true
}
defineExpose({
    open
})
</script>

<style lang="scss" scoped>
	.dialog-content {
		display: flex;
		padding: 0 30px 20px 30px;
	}

	.product-name {
		display: flex;
		justify-content: center;
		font-size: 16px;
		margin: 10px;
		color: #333;
	}

	:deep(.el-form-item) {
		margin: 30px;
	}
</style>
